<template>
  <div class="nav">
    <van-nav-bar
            :title="page.title"
            :right-text="page.rightText"
            :left-arrow="page.left"
            @click-left="onClickLeft"
            @click-right="onClickRight"
    />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    @Prop({default: () => { return { title: '', left: false, rightText: '' }}} )
    private page?: any;


    private onClickLeft() {
        (this.$router as any).back()
    }
    private onClickRight() {

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav {
  width: 100%;
  position: fixed;
  top: 0;
  height: 3rem;
  z-index: 2000;
}
.nav >>> .van-nav-bar {
  background-color: #ff6600;
}
.nav >>> .van-nav-bar .van-nav-bar__title{
  color: #ffffff;
}
.nav >>> .van-nav-bar .van-icon {
  color: #ffffff;
}
</style>
